<template>
  <div class="app-container pagePublic">
     <div class="buttonGroup">
      <el-button :class="userStatus==1?'b1':'b2'" @click="userStatusChange(1)">用户信息</el-button>
      <el-button :class="userStatus==2?'b1':'b2'" @click="userStatusChange(2)" >用户认证</el-button>
    </div>
    <userInfo v-if="userStatus==1"></userInfo>
    <authentication v-if="userStatus==2"  :userRenZheng="userRenZheng"></authentication>
  </div>
</template>

<script>
  import {
  changeUerInfo
} from '@/api/article'
  import userInfo from "./component/userInfo";
  import authentication from "./component/authentication";
  export default {
    name: 'index',
    components: {userInfo,authentication},
    data() {
      return {
        userStatus:1,
        userRenZheng:1,//用户认证(1-认证,2-变更认证)
      }
    },
    watch:{
      // userRenZheng(val){
      //   this.userRenZheng=val
      // }
    },
    created(){
      // this.getChangeUserInfo()
    },
    mounted() {
      this.userStatusChange(1)
    },
    methods: {
    // ********************用户变更信息获取*************************/
      getChangeUserInfo(){
        changeUerInfo({}).then(data =>{
          if(data.code==1){
            if(data.data.list.length>0){
              console.log(1111,data.data.list)
              this.userRenZheng=2;
            }else{
              this.userRenZheng=1;
            }
          }        console.log(111,this.userRenZheng)
        })
      },
       userStatusChange(status) {
       //  this.getChangeUserInfo()
          this.userStatus = status
      }
    }
  }
</script>
<style scoped lang="scss">
  .buttonGroup{
    width: 100%;
    padding: 5px;
    box-shadow: 0 1px 3px 0 rgba(0,0,0,0.5), 0 0 3px 0 rgba(0,0,0,0.3);
  }
  .b1{
    color: #fff;
    border-color: #badeff;
    background-color: #1890ff;
  }
  .b2{
    background: #fff;
    border-color: #DCDFE6;
    color: #606266;
   }
</style>
